<template>
    <div class="BaseInfo" style="width: 100%">
        <div class="BaseInfoTable" v-if="dispalyType==='table'">
            <Table :columns="tableHead" :data="tableBody">
                <template slot-scope="{ row }" slot="custName">
                    <a @click="showContractDetial(row)">{{ row.custName }}</a>
                </template>
            </Table>
        </div>
        <div class="BaseInfoForm" v-else>
            <Form :label-width="120" disabled>
                <List>
                    <ListItem v-for="(item,index) in  tableBody" :key="index">
                        <Row type="flex" justify="center" align="middle">
                            <Col :sm="4" :md="2">
                                <div class="item-title">
                                    <span>{{item.roleType}}</span>
                                </div>
                            </Col>
                            <Col :sm="20" :md="22">
                                <Row>
                                    <Col :sm="24" :md="12">
                                        <FormItem label="姓名" class="item-disabled">
                                            <Input v-model="item.custName" disabled/>
                                        </FormItem>
                                    </Col>
                                    <Col :sm="24" :md="12">
                                        <FormItem label="证件号码" class="item-disabled">
                                            <Input v-model="item.certNo" disabled/>
                                        </FormItem>
                                    </Col>
                                    <Col :sm="24" :md="12">
                                        <FormItem label="证件类型" class="item-disabled">
                                            <Input v-model="item.certType" disabled/>
                                        </FormItem>
                                    </Col>
                                    <Col :sm="24" :md="12">
                                        <FormItem label="联系方式" class="item-disabled">
                                            <Input v-model="item.phone" disabled/>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </ListItem>
                </List>
            </Form>
        </div>
        <!-- <CustomerInfoDetial :model="model" :params="params" @closeModel="closeModel" /> -->
    </div>
</template>
<script>
    import {getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";
    import {deepClone} from "@/libs/utils/ObjectClone";

    export default {
        // 客户信息
        custName: "CustomerInfo",
        props: {
            contractNo: {
                type: String,
                required: true
            },
            dispalyType: {
                type: String,
                default: "table"
            },
            dataDict: {
                type: Object,
                required: true
            }
        },
        // components: { CustomerInfoDetial },
        data() {
            return {
                pageNo: 1,
                custRole: null,
                model: false,
                params: {},
                tableHead: [
                    {
                        title: "角色",
                        key: "roleType",
                    },
                    {
                        title: "姓名",
                        key: "custName",
                        slot: "custName"
                    },
                    {
                        title: "证件号码",
                        key: "certNo"
                    },
                    {
                        title: "证件类型",
                        key: "certType"
                    },
                    {
                        title: "联系方式",
                        key: "phone"
                    }
                ],
                tableBody: [],
                baseData: []
            };
        },
        watch: {
            baseData: {
                handler(val) {
                    this.updateTableBody();
                },
                deep: true
            },
            dataDict: {
                handler(val) {
                    this.updateTableBody();
                },
                deep: true
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
            },
            updateData(data) {
                console.log("客户信息:==updateData", data);
                if (Array.isArray(data)) this.baseData = data;
            },
            updateTableBody() {
                let data = [],
                    PersonRoleTypeDict = this.dataDict.PersonRoleTypeDict,
                    certTypeDict = this.dataDict.certTypeDict,
                    baseData = deepClone(this.baseData);
                if (Array.isArray(baseData)) {
                    baseData.forEach(ele => {
                        let c = ele.certType;
                        let e = ele.roleType;
                        if (c) {
                            ele.certType = getTitleFromDataDict(certTypeDict, c) || c;
                        }
                        if (e) {
                            ele.roleType = getTitleFromDataDict(PersonRoleTypeDict, e) || e;
                        }

                        data.push(ele);
                    });
                }
                console.log('data', data)
                this.tableBody = data;
            },
            showContractDetial(params) {
                console.log("clcik params", params);
                if (!params && !params.custName) return;
                params.contractNo = this.contractNo;
                this.afs.newTab(
                    this,
                    "projects/basic/pages/contract/contract-inquiry/contract-inquiry-detial/page/CustomerInfoDetial/index",
                    params.custName + "客户信息",
                    "ios-add",
                    params,
                    "customer-info-detial-" + this.pageNo,
                    [],
                    true
                );
                this.pageNo += 1;
            },
            closeModel() {
                this.model = false;
            }
        }
    };
</script>
